<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-11-13 15:15:27
 * @Descripttion: 
-->
<template>
  <div>
    <basic-container>
      <div class="orderStatus">
        <span class="title">1.订单状态</span>
         <el-divider></el-divider>
        <div style="background:#eee;padding:20px 16px;">
          <span class="hao">订单编号：22222222222222222222</span>
          <span class="hao">状态：待发货</span>
          <el-button type="primary" v-if="isFa" style="margin-left:500px;">发货</el-button>
          <br />
          <div style="margin:20px 0 0 ; ">你的订单已撤销</div>
        </div>
        <div style="padding:40px 0;width:800px;margin:0 auto">
          <el-steps :space="200" :active="1" finish-status="success">
            <el-step title="提交订单" description="2019-11-11 12:33:44"></el-step>
            <el-step title="付款成功"></el-step>
            <el-step title="卖家发货"></el-step>
            <el-step title="确认收货"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="orderMessage">
        <span class="title">2.订单信息</span>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="item">
              <ul>
                <li>下单时间：2019-12-11 21:25:44</li>
                <li>支付时间：2019-12-11 21:25:44</li>
                <li>支付方式：微信支付</li>
                <li>积分抵扣：0</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <ul>
                <li>收货人：非要健康</li>
                <li>联系电话：1111111111111111</li>
                <li>收货地址：山西省太原市</li>
                <el-button plain size="mini">复制</el-button>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <ul>
                <li>发货时间：2019-12-11 21:25:44</li>
                <li>快递公司：ddd</li>
                <li>
                  快递单号:11111
                  <el-button plain size="mini">复制</el-button>
                </li>
                <li>备注：</li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="goods">
        <span class="title">3.商品清单</span>
         <el-divider></el-divider>
        <avue-crud
          ref="crud"
          :option="tableOption"
          :data="list"
          :page="page"
          v-model="form"
          :table-loading="listLoading"
          @on-load="getList"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
        <template slot="b" slot-scope="scope">
             <img :src="scope.row.b" alt="">
        </template>
        </avue-crud>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { tableOption } from "@/const/crud/deal/orderDetail";
export default {
  name: "OrderDetail",
  data() {
    return {
      isFa: true,
      tableOption: tableOption,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [{
         a:111,
         b:'https://gitee.com/smallweigit/avue/badge/star.svg?theme=white',
      }],
      listLoading: false,
      form:{},
    };
  },
  methods: {
    getList(){},
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 22px;
}
.hao {
  font-weight: 800;
  font-size: 22px;
  margin-right: 30px;
  margin-bottom: 20px;
}
.item {
  background: #eee;
  height: 180px;
  margin-top: 10px;
}
ul {
  padding-top: 20px;
}
li {
  list-style: none;
  margin-bottom: 10px;
}
.bg-purple {
  background: #eee;
}
</style>